<template>
    <div>
        <div class="search">
            <input type="text" class="search-input" placeholder="输入城市名或拼音" v-model="keyword">
        </div>
        <div class="search-content" v-show="keyword" ref="search">
            <ul>
                <li class="search-item border-bottom" v-for="item of list" :key="item.id" @click="handleCityChange(item.name)">{{item.name}}</li>
                <li class="search-item border-bottom" v-show="!this.list.length">没有找到匹配数据</li>
            </ul>
        </div>
    </div>
</template>
<script>
import Bscroll from 'better-scroll'
export default {
    props:{
        cities:Object
    },
    name:'CitySearch',
    data(){
        return{
            keyword:'',
            list:[],
            timer:null
        }
    },
    watch:{
        keyword(){
            if(this.timer){
                clearTimeout(this.timer);
            }
            if(!this.keyword){
                this.list = [];
                return;
            }
            this.timer = setTimeout(() => {
                const result = [];
                for(let i in this.cities){
                    this.cities[i].forEach(value => {
                        if(value.spell.indexOf(this.keyword) > -1 ||
                            value.name.indexOf(this.keyword) > -1){
                                result.push(value);
                            }
                    });
                }
                this.list = result;
            },100)
            this.scroll.refresh();
        }
    },
    mounted(){
        this.scroll = new Bscroll(this.$refs['search'],{});
    },
    methods:{
        handleCityChange(city){
            this.$store.commit('changeCity',city);
            this.$router.push('/');
        }
    }
}
</script>
<style lang="scss" scoped>
@import '~styles/varibles.scss';
.search{
    height:.72rem;
    background-color: $themeBgColor;
    padding:0 .2rem;
    .search-input{
        box-sizing: border-box;
        height:.62rem;
        width:100%;
        text-align: center;
        border-radius: .06rem;
        color:#666;
        padding:0 .1rem;
    }
}
.search-content{
    height: 100%;
    z-index: 1;
    position:absolute;
    overflow: hidden;
    top:1.58rem;
    left:0;
    right:0;
    bottom:0;
    background-color:#eee;
    .search-item{
        line-height: .62rem;
        padding-left: .2rem;
        background-color: #fff;
        color:#666;
    }
}
</style>